<template>
	<!-- 上传页 -->
	<view class="u-demo">
		<!--自然人合同模板1-->
		<view class="bgfff con back ">
			<view class="flex flex-align-center flex-pack-justify item f26 " style="flex-direction: column;">
				<view class="flex flex-align-center">
					<image src="../static/pdf.png"></image>
					<text>乙方已满18岁，银行账号是自己的</text>
				</view>
				<uni-transition :duration="200" :mode-class="'slide-right'" :show="true">
					<view class="down f26 c666" style="display: flex;justify-content: flex-end;margin-top: 20rpx;"><text
							class="cfff te_c text24 white" @click="urlChangeTemplate(1)">去签署</text>
					</view>
				</uni-transition>
			</view>
		</view>
		<!--自然人合同模板2-->
		<view class="bgfff con back ">
			<view class="flex flex-align-center flex-pack-justify item f26" style="flex-direction: column;">
				<view class="flex flex-align-center">
					<image src="../static/pdf.png"></image>
					<text>乙方已满18岁，银行账号非本人</text>
				</view>
				<uni-transition :duration="600" :mode-class="'slide-right'" :show="true">
					<view class="down f26 c666" style="display: flex;justify-content: flex-end;margin-top: 20rpx;"><text
							class="cfff te_c text24 white" @click="urlChangeTemplate(2)">去签署</text></view>
				</uni-transition>
			</view>
		</view>
		<!--自然人合同模板3-->
		<view class="bgfff con back ">
			<view class="flex flex-align-center flex-pack-justify item f26" style="flex-direction: column;">
				<view class="flex flex-align-center">
					<image src="../static/pdf.png"></image>
					<text>乙方未满18岁，银行账号是自己的</text>
				</view>
				<uni-transition :duration="800" :mode-class="'slide-right'" :show="true">
					<view class="down f26 c666" style="display: flex;justify-content: flex-end;margin-top: 20rpx;"><text
							class="cfff te_c text24 white" @click="urlChangeTemplate(3)">去签署</text></view>
				</uni-transition>
			</view>
		</view>
		<!-- 自然人合同模板4 -->
		<view class="bgfff con back ">
			<view class="flex flex-align-center flex-pack-justify item f26" style="flex-direction: column;">
				<view class="flex flex-align-center">
					<image src="../static/pdf.png"></image>
					<text>乙方未满18岁，银行账号非本人</text>
				</view>
				<uni-transition :duration="1000" :mode-class="'slide-right'" :show="true">
					<view class="down f26 c666" style="display: flex;justify-content: flex-end;margin-top: 20rpx;"><text
							class="cfff te_c text24 white" @click="urlChangeTemplate(4)">去签署</text></view>
				</uni-transition>

			</view>
		</view>
		<!-- 签署合同弹窗 -->
		<u-popup width="95%" style="border: 1px solid red;" :custom-style="customStyle" borderRadius='10'
			v-model="isShowDownLoad" mode="center" closeable @close="popupClose">
			<view>
				<text
					style="color: rgb(71, 70, 70); font-weight: bold; font-size: 30rpx; margin-top: 70rpx; margin-left: 20rpx; margin-right: 20rpx; display: block">
					为付款和生成合同需要，请填写以下信息:
				</text>
				<!-- 				   label设置左侧内容，label-width设置label的宽度，******************************************************************************8888888888
					prop很重要！是验证是否有效的重要属性。******************************************************************************8888888888
					且避坑点是，这个prop只能写在u-form-item标签里，写在u-input里无效******************************************************************************8888888888
 -->
				<form @submit="formSubmit" @reset="formReset">
					<view class="fontWeight fontColor text28 margin-top20" style="margin-left: 20rpx;">请填写乙方信息:</view>
					<view class="item p_r" style="width: 600rpx">
						<text class="f24" style="font-size: 28rpx">
							<text style="font-size: 28rpx; color: red; margin-right: 10rpx">*</text>
							乙方身份证号
						</text>
						<input placeholder-style="font-size:26rpx" type="text" placeholder="请输入乙方身份证号" class="f28"
							name="y_idcard" />
					</view>
					<view class="item p_r" style="width: 600rpx">
						<text class="f24" style="font-size: 28rpx">
							<text style="font-size: 28rpx; color: red; margin-right: 10rpx">*</text>
							乙方联系地址
						</text>
						<input placeholder-style="font-size:26rpx" type="text" placeholder="请输入乙方联系地址" class="f28"
							name="y_address" />
					</view>
					<view class="item p_r" style="width: 600rpx">
						<text class="f24" style="font-size: 28rpx">
							<text style="font-size: 28rpx; color: red">*</text>
							乙方电子邮件
						</text>
						<input placeholder-style="font-size:26rpx" type="text" placeholder="请输入乙方电子邮件" class="f28"
							name="y_email" />
					</view>
					<view class="fontWeight fontColor text28 margin-top20" style="margin-left: 20rpx;">请填写收取服务费的银行账号:
					</view>
					<view v-if="type==1 || type==3 ">
						<view class="item p_r" style="width: 600rpx">
							<text class="f24" style="font-size: 28rpx">
								<text style="font-size: 28rpx; color: red">*</text>
								银行账号
							</text>
							<input placeholder-style="font-size:26rpx" type="text" placeholder="请输入银行账号" class="f28"
								name="h_account" />
						</view>
						<view class="item p_r" style="width: 600rpx">
							<text class="f24" style="font-size: 28rpx">
								<text style="font-size: 28rpx; color: red">*</text>
								开户行（请把开户行填写完整，**银行**省**市分行**支行）
							</text>
							<input placeholder-style="font-size:26rpx" type="text" placeholder="请输入开户行" class="f28"
								name="h_deposit" />
						</view>
					</view>
					<view v-if="type==2 || type==4">
						<view class="item p_r" style="width: 600rpx">
							<text class="f24" style="font-size: 28rpx">
								<text style="font-size: 28rpx; color: red">*</text>
								户名
							</text>
							<input placeholder-style="font-size:26rpx" type="text" placeholder="请输入户名" class="f28"
								name="h_name" />
						</view>
						<view class="item p_r" style="width: 600rpx">
							<text class="f24" style="font-size: 28rpx">
								<text style="font-size: 28rpx; color: red; margin-right: 10rpx">*</text>
								户名身份证号
							</text>
							<input placeholder-style="font-size:26rpx" type="text" placeholder="请输入户名份证号" class="f28"
								name="h_idcard" />
						</view>
						<view class="item p_r" style="width: 600rpx">
							<text class="f24" style="font-size: 28rpx">
								<text style="font-size: 28rpx; color: red">*</text>
								银行账号
							</text>
							<input placeholder-style="font-size:26rpx" type="text" placeholder="请输入银行账号" class="f28"
								name="h_account" />
						</view>
						<view class="item p_r" style="width: 600rpx">
							<text class="f24" style="font-size: 28rpx">
								<text style="font-size: 28rpx; color: red">*</text>
								开户行（请把开户行填写完整，**银行**省**市分行**支行）
							</text>
							<input placeholder-style="font-size:26rpx" type="text" placeholder="请输入开户行" class="f28"
								name="h_deposit" />
						</view>
					</view>
					<view class="fontWeight fontColor text28 margin-top20" style="margin-left: 20rpx;"
						v-if="type==3 || type==4 ">请填写监护人信息:</view>
					<view v-if="type==3 || type==4">
						<view class="item p_r" style="width: 600rpx">
							<text class="f24" style="font-size: 28rpx">
								<text style="font-size: 28rpx; color: red">*</text>
								监护人姓名
							</text>
							<input placeholder-style="font-size:26rpx" type="text" placeholder="请输入监护人姓名" class="f28"
								name="j_nickname" />
						</view>
						<view class="item p_r" style="width: 600rpx">
							<text class="f24" style="font-size: 28rpx">
								<text style="font-size: 28rpx; color: red">*</text>
								监护人身份证号
							</text>
							<input placeholder-style="font-size:26rpx" type="text" placeholder="请输入监护人身份证号" class="f28"
								name="j_idcard" />
						</view>
						<view class="item p_r" style="width: 600rpx">
							<text class="f24" style="font-size: 28rpx">
								<text style="font-size: 28rpx; color: red">*</text>
								监护人联系地址
							</text>
							<input placeholder-style="font-size:26rpx" type="text" placeholder="请输入监护人联系地址" class="f28"
								name="j_address" />
						</view>
						<view class="item p_r" style="width: 600rpx">
							<text class="f24" style="font-size: 28rpx">
								<text style="font-size: 28rpx; color: red">*</text>
								监护人电话
							</text>
							<input placeholder-style="font-size:26rpx" type="text" placeholder="请输入监护人电话" class="f28"
								name="j_phone" />
						</view>
						<view class="item p_r" style="width: 600rpx">
							<text class="f24" style="font-size: 28rpx">
								<text style="font-size: 28rpx; color: red">*</text>
								监护人电子邮件
							</text>
							<input placeholder-style="font-size:26rpx" type="text" placeholder="请输入监护人电子邮件" class="f28"
								name="j_email" />
						</view>
					</view>
					<uni-transition :duration="800" :mode-class="'slide-bottom'" :show="transhow">
						<view style="padding: 20rpx; margin-top: 10rpx">
							<button :loading="loading"
								style="width: 100%;background: linear-gradient(159deg, #80e6fc 0%, #0051ff 99%);"
								class="subbutton" formType="submit">确定</button>
						</view>
					</uni-transition>
				</form>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Validate from '../../../utils/util.js';
	export default {
		data() {
			return {
				// uview  弹窗自定义样式
				customStyle: {
					border: "3px solid red"
				},
				transhow: false,
				loading: false, //按钮加载
				type: 1,
				// 审核中，待上传或  审核通过后的状态
				status: 2,
				// 用户信息
				userInfo: '',
				pageCount: '', //图片上传张数
				// 上传成功与否的状态
				contract_one: '',
				contract_two: '',
				content: '暂无',
				// type  0未上传 1待审核 2未通过 3已通过
				state: {},
				//  上传合同模板需要传递的参数
				uid: '',
				user_type: '',
				phone: '',
				fileReal: '',
				// 户名输入框是否禁止输入
				isDisabled: false,
				// 是否显示提示弹窗
				isShowDownLoad: false,
				form: { //form表单数据
					inputValueName: '', //姓名
					idcard: '', //身份证号
					account: '', //银行账号
					deposit: '' //开户行
				},
				// 表单校验规则
				rules: {
					inputValueName: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur'
					}],
					idcard: [{
						required: true,
						min: 5,
						message: '请输入身份证号',
						trigger: 'blur'
					}],
					// 手机号
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								console.log('手机号码是否正确', value)
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					nickname: '' //用户名字
				}
			}
		},
		onShow() {
			this.isShowDownLoad = false //关闭弹窗
			this.loading = false
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo');
			this.userInfo = userInfo,
				this.nickname = userInfo ? userInfo[0].name : ''
			this.uid = userInfo ? userInfo[0].id : '',
				this.user_type = userInfo.user_type
			this.phone = userInfo[0].phone
			if (this.user_type == '自然人') {
				this.pageCount = 6
			} else {
				this.pageCount = 6
			}
		},
		methods: {
			// 弹出层收起
			popupClose: function() {
				this.transhow = false
				console.log('this。transhow', this.transhow)
			},
			// 去签署
			urlChangeTemplate: function(e) {
				this.type = e
				this.isShowDownLoad = true //打开信息弹窗
				this.transhow = true //动态按钮
				console.log('签署的是', this.type)
			},
			// 弹窗信息确定
			// 确定提交
			formSubmit: function(e) {
				console.log('获取弹窗信息', e)
				let obj = e.detail.value
				let {
					y_idcard,
					y_address,
					y_email,
					h_name,
					h_idcard,
					h_account,
					h_deposit,
					j_nickname,
					j_idcard,
					j_address,
					j_phone,
					j_email
				} = e.detail.value
				obj.type = this.type
				if (this.type == 1) { //自然人模板1
					console.log('走模板1')
					obj.y_nickname = this.nickname,
						obj.h_name = this.nickname,
						obj.y_phone = this.phone
					if (!y_idcard) {
						this.$.toast('请输入乙方身份证号');
						return;
					}
					if (!Validate.ValidateIdCard(y_idcard)) {
						this.$.toast('身份证号格式不正确');
						return;
					}
					if (!y_address) {
						this.$.toast('请输入乙方联系地址');
						return;
					}
					if (!y_email) {
						this.$.toast('请输入乙方电子邮件');
						return;
					}
					if (!Validate.email(y_email)) {
						this.$.toast('电子邮件格式不正确');
						return;
					}
					if (!h_account) {
						this.$.toast('请输入银行账号');
						return;
					}
					if (!Validate.checkOpeningBankAccount(h_account)) {
						this.$.toast('银行账号格式不正确');
						return;
					}
					if (!h_deposit) {
						this.$.toast('请输入开户行');
						return;
					}
				} else if (this.type == 2) { //自然人模板2
					console.log('走模板2')
					obj.y_nickname = this.nickname,
						obj.y_phone = this.phone
					if (!y_idcard) {
						this.$.toast('请输入乙方身份证号');
						return;
					}
					if (!Validate.ValidateIdCard(y_idcard)) {
						this.$.toast('身份证号格式不正确');
						return;
					}
					if (!y_address) {
						this.$.toast('请输入乙方联系地址');
						return;
					}
					if (!y_email) {
						this.$.toast('请输入乙方电子邮件');
						return;
					}
					if (!Validate.email(y_email)) {
						this.$.toast('电子邮件格式不正确');
						return;
					}
					if (!h_name) {
						this.$.toast('请输入户号');
						return;
					}
					if (!h_idcard) {
						this.$.toast('请输入户名身份证号');
						return;
					}
					if (!Validate.ValidateIdCard(h_idcard)) {
						this.$.toast('户名身份证号格式不正确');
						return;
					}
					if (!h_account) {
						this.$.toast('请输入银行账号');
						return;
					}
					if (!Validate.checkOpeningBankAccount(h_account)) {
						this.$.toast('银行账号格式不正确');
						return;
					}
					if (!h_deposit) {
						this.$.toast('请输入开户行');
						return;
					}
				} else if (this.type == 3) { //自然人模板3
					console.log('走模板3')
					obj.y_nickname = this.nickname,
						obj.h_name = this.nickname
					obj.y_phone = this.phone
					if (!y_idcard) {
						this.$.toast('请输入乙方身份证号');
						return;
					}
					if (!Validate.ValidateIdCard(y_idcard)) {
						this.$.toast('身份证号格式不正确');
						return;
					}
					if (!y_address) {
						this.$.toast('请输入乙方联系地址');
						return;
					}
					if (!y_email) {
						this.$.toast('请输入乙方电子邮件');
						return;
					}
					if (!Validate.email(y_email)) {
						this.$.toast('电子邮件格式不正确');
						return;
					}
					if (!h_account) {
						this.$.toast('请输入银行账号');
						return;
					}
					if (!Validate.checkOpeningBankAccount(h_account)) {
						this.$.toast('银行账号格式不正确');
						return;
					}
					if (!h_deposit) {
						this.$.toast('请输入开户行');
						return;
					}
					if (!j_nickname) {
						this.$.toast('请输入监护人姓名');
						return;
					}
					if (!j_idcard) {
						this.$.toast('请输入监护人身份证号');
						return;
					}
					if (!Validate.ValidateIdCard(j_idcard)) {
						this.$.toast('监护人身份证号格式不正确');
						return;
					}
					if (!j_address) {
						this.$.toast('请输入监护人联系地址');
						return;
					}
					if (!j_phone) {
						this.$.toast('请输入监护人电话');
						return;
					}
					if (!Validate.phone(j_phone)) {
						this.$.toast('监护人电话号格式不正确');
						return;
					}
					if (!j_email) {
						this.$.toast('请输入监护人电子邮件');
						return;
					}
					if (!Validate.email(j_email)) {
						this.$.toast('监护人电子邮件格式不正确');
						return;
					}
				} else { //自然人模板4
					console.log('走模板4')
					obj.y_nickname = this.nickname
					obj.y_phone = this.phone
					if (!y_idcard) {
						this.$.toast('请输入乙方身份证号');
						return;
					}
					if (!Validate.ValidateIdCard(y_idcard)) {
						this.$.toast('身份证号格式不正确');
						return;
					}
					if (!y_address) {
						this.$.toast('请输入乙方联系地址');
						return;
					}
					if (!y_email) {
						this.$.toast('请输入乙方电子邮件');
						return;
					}
					if (!Validate.email(y_email)) {
						this.$.toast('电子邮件格式不正确');
						return;
					}
					if (!h_name) {
						this.$.toast('请输入户号');
						return;
					}
					if (!h_idcard) {
						this.$.toast('请输入户名身份证号');
						return;
					}
					if (!Validate.ValidateIdCard(h_idcard)) {
						this.$.toast('户名身份证号格式不正确');
						return;
					}
					if (!h_account) {
						this.$.toast('请输入银行账号');
						return;
					}
					if (!Validate.checkOpeningBankAccount(h_account)) {
						this.$.toast('银行账号格式不正确');
						return;
					}
					if (!h_deposit) {
						this.$.toast('请输入开户行');
						return;
					}
					if (!j_nickname) {
						this.$.toast('请输入监护人姓名');
						return;
					}
					if (!j_idcard) {
						this.$.toast('请输入监护人身份证号');
						return;
					}
					if (!Validate.ValidateIdCard(j_idcard)) {
						this.$.toast('监护人身份证号格式不正确');
						return;
					}
					if (!j_address) {
						this.$.toast('请输入监护人联系地址');
						return;
					}
					if (!j_phone) {
						this.$.toast('请输入监护人电话');
						return;
					}
					if (!Validate.phone(j_phone)) {
						this.$.toast('监护人电话号格式不正确');
						return;
					}
					if (!j_email) {
						this.$.toast('请输入监护人电子邮件');
						return;
					}
					if (!Validate.email(j_email)) {
						this.$.toast('监护人电子邮件格式不正确');
						return;
					}
				}
				this.loading = true
				uni.navigateTo({ //跳转电子合同签署
					url: '../steps/index?obj=' + JSON.stringify(obj) // 对象解构
				})

			},

		},
	}
</script>

<style lang="scss">
	.form {

		// 覆盖uvie表单原有样式规则
		.u-form-item {

			// border: 2px solid green;
			.u-form-item__body {
				.u-form-item--left {
					// border: 2px solid green !important;//覆盖lebel边距
					width: 150rpx !important; //覆盖lebel边距

					.u-form-item--left__content {
						.u-form-item--left__content__label {
							width: 300rpx !important; //覆盖input边距
							margin-right: 50rpx !important; //覆盖input边距
						}
					}
				}

				.u-form-item--right {
					// border: 2px solid blue  !important;
					width: 300rpx !important;
				}
			}

		}
	}

	.con {
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
		padding-bottom: 30rpx;
	}

	.title {
		display: block;
		padding: 15rpx 20rpx;
		font-weight: bold;
		// border-bottom: 1px #e5e5e5 solid;
	}

	.item {
		margin-top: 30rpx;
		padding: 0 20rpx;
	}

	.item image {
		width: 40rpx;
		height: 46rpx;
		margin-right: 20rpx;
	}

	.down {
		text-align: center;
		margin-right: 20rpx;
	}

	.down text {
		display: inline-block;
		background: linear-gradient(159deg, #80e6fc 0%, #0051ff 99%);
		border-radius: 10rpx;
		width: 178rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.state {
		text-align: right;
		padding: 20rpx 30rpx;
		margin-top: 20rpx;
		justify-content: flex-end;
	}

	.state .del {
		color: #f51f02;
		line-height: 60rpx;
		margin-right: 40rpx;
	}

	.state .down1 {
		border: 1px #029ee9 solid;
		border-radius: 10rpx;
		width: 178rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #029ee9;
		margin-right: 20rpx;
	}

	.state .down {
		margin-right: 0;
	}

	.subbutton {
		background-color: #029ee9;
		color: #ffffff;
		font-size: 24rpx;
	}

	// input {
	//     border-bottom: 1px solid #aeaeae;
	//     padding-bottom: 10rpx;
	//     margin-top: 10rpx;
	// }
</style>
